{extend name='admin@public/main'}

{block name='style'}
<style>
	body{min-width:500px}
	#news_box{position:relative;}
	#news_box .user_item{top:0;left:0;width:232px;margin:10px;padding:5px;cursor:pointer;position:relative;border:1px solid #ccc;box-sizing:content-box;}
	#news_box .user_item:hover,
	#news_box .user_item.active{box-shadow:1px 0 10px #09c;border-color:#09c;}
	#news_box .user_item .news_articel_item{width:100%;height:150px;overflow:hidden;position:relative;background-size:100%;background-position:center center;}
	#news_box .user_item .news_articel_item p{bottom:0;width:100%;color:#fff;padding:5px;max-height:5em;font-size:12px;overflow:hidden;position:absolute;text-overflow:ellipsis;background:rgba(0, 0, 0, 0.7);}
	#news_box .user_item .news_articel_item.other{height:50px;padding:5px 0;}
	#news_box .user_item .news_articel_item .left-image{width:50px;height:50px;float:left;overflow:hidden;position:relative;background-size:100%;background-position:center center;}
	#news_box .user_item .news_articel_item .right-text{float:left;width:180px;padding-right:10px;overflow:hidden;text-overflow:ellipsis;}
	#news_box .user_item .hr-line-dashed:last-child{display:none}
	#news_box .hr-line-dashed{margin:6px 0 1px 0}
	.page-style{bottom:0;width:100%;padding:0 10px;position:fixed;background:#fff;height:50px}
	.page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important;}
</style>
{/block}

{block name="body"}
<div class="news-container" id='news_box'>
	{foreach $list as $vo}
	<div class="user_item" data-user-name="{$vo.username}" data-user-id="{$vo.id}">
		{$vo.username}
	</div>
	{/foreach}
	<div style="clear:both"></div>
	{if empty($list)}<p class="help-block text-center well">没 有 记 录 哦！</p>{/if}
</div>
<div style="height:50px"></div>
<div class="page-style">{if isset($page)}{$page|raw}{/if}</div>
{/block}


{block name="script"}
<script>
	require(['jquery.masonry'], function (Masonry){
		var container = document.querySelector('#news_box');
		var msnry = new Masonry(container,{itemSelector:'.user_item', columnWidth:0});
		msnry.layout();
		/* 事件处理 */
		$('.user_item').on('mouseenter', '.news-box', function (){
			$(this).addClass('active');
		}).on('mouseleave', '.news-box', function (){
			$(this).removeClass('active');
		});
		var seletor = '[name="{$Think.get.field|decode|default=0}"]';
		if (seletor){
			$('[data-user-id]').on('click', function (){
				window.top.$('#user_id').val($(this).attr('data-user-id')).trigger('change');
				window.top.$('#user_name').val($(this).attr('data-user-name')).trigger('change');
				window.top.$('#show_name').text($(this).attr('data-user-name')).trigger('change');
				parent.layer.close(parent.layer.getFrameIndex(window.name))
			});
		}
		// 分页事件处理
		$('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function (){
			var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
			urls.shift();
			window.location.href = urls.join('#');
		}).off('click', '[data-open]').on('click', '[data-open]', function (){
			var url = this.getAttribute('data-open');
			window.location.href = url;
		});
	});
</script>
{/block}